<template>
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header"  right-text="社区选择"  left-arrow @click-left="$router.go(-1)" @click-right="onClickRight"/>
     <van-list v-model="loading" :finished="finished" finished-text="没有更多了"  @load="onLoad">
        <van-cell class="news-content" v-for="(item,index) in actList" @click="actiList(item.path,item.id)" :key="index" >
          <ul>
          <li  class="acti-list">
            <div class="acti-img">
              <img :src="item.activeImg" alt="">
            </div>
            <div class="acti-box">
              <p class="acti-title">{{item.activeTitle}}</p>
              <div class="acti-content">
                <p >活动时间：<label >{{item.startTime}}</label></p>
                <p >活动地址：<label >{{item.activeAddress}}</label></p>
              </div>
            </div>
            <div :class="{'prompt':item.activeStatus == 1,'over':item.activeStatus == 3,'hot':item.activeStatus == 2}">
                <label v-if="item.activeStatus==1">进行中</label>  
                <label v-else-if="item.activeStatus==3">已结束</label>  
                <label v-else>火热报名</label>  
            </div>
          </li> 
        </ul>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant';
  export default {
  data(){
    return{
      id:this.$route.query.id ? this.$route.query.id : '',
      header: "社区活动",
      loading: false,
      finished: false,
      actList:[],
      page:0,
      total:-1,
    }
  },
 
  methods:{
      // 点击社区选择
      onClickRight() {
          this.$router.push( {path: "../community/Overview",query:{source:'Activity'}})
      },
      // 点击社区列表
      actiList(e,id){
        this.$router.push( {path: "../details/activityList",query: { id: id}})
      },
      // 获取社区列表接口
      getActivityList(){
        let params ={
          userId:sessionStorage.getItem('userId'),
          page : this.page,
          pageSize :10,
          type:1,
          commId:this.id
        }
        apiHttp.activityIndex.getActivityList(params,resp=>{
          if(resp.resultCode == '000000'){
            for(let i = 0; i < resp.data.actList.length; i++){
              this.actList.push(resp.data.actList[i])
            }
            this.total = resp.data.total
            this.loading = false;
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      onLoad(){
        if(this.actList.length == this.total){
            this.finished  = true
            this.loading = false;
        }else{
            this.page++
            this.getActivityList();
        }
      }
    },
  }
</script>
<style scoped>

 @import '../../assets/css/index.css';
  .van-cell{
    width: 90%;
  }
  .news-content{
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .acti-img{
    height: 7rem;
    border-radius:10px;
  }
  .acti-img img{
    border-radius:4px;
  }
  .acti-box{
    padding: 0.5rem 0.5rem 0 0.5rem;
  }
  .acti-title{
    font-size: 0.65rem;
    font-weight: 600;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .acti-content p label{
    color: #999999;
  }
  .acti-list{
    position: relative;
  }
  /* 进行中 */
  .prompt{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #27C86B transparent transparent transparent;
  }
  /* 已结束 */
  .over{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #FF9C00 transparent transparent transparent;
  }
  /* 火热报名 */
   .hot{
    position: absolute;
    top: 0;
    right: -3rem;
    
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #D33043 transparent transparent transparent;
  }
  .prompt label,.over label{
    position: absolute;
    top: -2.1rem;
    left: -2.2rem;
    font-size: 0.55rem;
    width: 3rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #ffffff;
  }
  .hot label{
    position: absolute;
    font-size: 0.55rem;
    top: -2.2rem;
    left: -2.2rem;
    width: 3rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #ffffff;
  }
</style>